<template>
  <div>App</div>
  <!--  读取state数据 -->
  <p>{{ counterStore.count }}</p>
  <p>{{ counterStore.age }}</p>
  <!-- 读取getters数据 -->
  <p>{{ counterStore.oddOrEven }}</p>
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
</template>
<script lang="ts">
export default {
  name: 'App',
};
</script>

<script setup lang="ts">
import { useCounterStore } from './store/modules/counter';

//所有pinia模块的数据都进行了数据代理，可以通过store直接访问
const counterStore = useCounterStore();

const increment = () => {
  /*
    将来更新数据看是否需要发送请求：
      需要发送请求，就定义action
      不需要发送请求，就直接更新数据
  */
  // 触发action函数
  counterStore.increment(1, 2, 3, 4);
};

const decrement = () => {
  //可以直接更新数据
  counterStore.count--;
  counterStore.age--;

  // 直接更新多个数据的方法
  // counterStore.$patch({ // 不ok，$patch没有启到任何作用
  //   count: counterStore.count--,
  //   age:  counterStore.age--
  // });

  counterStore.$patch({
    count: counterStore.count - 1,
    age: counterStore.age - 1,
  });
};
</script>
<style scoped></style>
